<script setup>
import {ref, watch, inject, onMounted} from 'vue'
import {ElMessage, ElTree} from 'element-plus'
import axios from 'axios'

//登录相关逻辑
const userinfo=inject("userinfo")

//获取机构树
const tree=ref({id:-1, label:'具身智能产业链', children:[]})
onMounted(async()=>{
    try{
        var ret = await axios.get('/api/organization')
        ret.data.map(level1=>{
            var item={
                id:level1.id,
                label:level1.name,
                children:[]
            }
            level1.level2.map(level2=>{
                var item2={
                    id:level2.id,
                    label:level2.name,
                    parent:item,
                    children:[]
                }
                level2.organizations.map(organization=>{
                    var item3={
                        id:organization.id,
                        label:organization.name,
                        parent:item2,
                        is_leaf:true
                    }
                    if(userinfo.value?.organization?.id==organization.id) item3.expand=true
                    item2.children.push(item3)
                })
                item.children.push(item2)
            })
            tree.value.children.push(item)
        })
    }catch(err){
        console.error(err)
        ElMessage.error('获取机构树出错！')
    }
})

//筛选
const keyword=ref('')
const ref_tree=ref(null)
function handleFilter(keyword, data){
    if(!keyword) return true
    if(data.label?.includes(keyword)) return true
    var x=data.$$data.parent
    while(x){
        if(x.label.includes(keyword)) return true
        x=x.$$data?.parent
    }
    return false
}
watch(keyword,val=>{
    ref_tree.value?.filter(val)
})

//按钮
function handleMyOrganization(){
    if(userinfo.value?.organization) ref_tree.value?.setExpandKeys([userinfo.value.organization.id])
}

console.log(userinfo.value.organization)
</script>

<template>
<div>
    <router-view v-slot="{ Component }">
        <transition name="fade">
            <component :is="Component"/>
        </transition>
    </router-view>
    <div v-show="$route.name=='机构清单'">
        <div class="list">
            <div style="margin:10px 10px; display:flex; justify-content:space-between; align-items: center;">
                <div style="display:flex; align-items:center;">
                    <el-input
                        v-model="keyword"
                        placeholder="搜索"
                    />
                </div>
                <div v-if="userinfo?.organization"><el-button @click="handleMyOrganization">我的机构</el-button></div>
            </div>
            <hr>
            <div style="height:800px;">
                <vue3-tree-org
                    ref="ref_tree"
                    :data="tree"
                    :horizontal="true"
                    :props="{expand:'expand', isLeaf:'is_leaf'}"
                    :toolBar="{scale:false, restore:true, expand:true, zoom:false, fullscreen:true}"
                    :collapsable="true"
                    :default-expand-level="1"
                    :scalable="false"
                    :draggable="true"
                    :disabled="true"
                    :node-draggable="false"
                    :draggable-on-node="true"
                    :filter-node-method="handleFilter"
                >
                    <template v-slot="{node}">
                        <div v-if="node.$$data.is_leaf">
                            <span @click="$router.push({name:'机构主页', params:{id:node.$$data.id}})" class="leaf">{{ node.label }}</span>
                        </div>
                        <div v-else>
                            <span>{{ node.label }}</span>
                        </div>
                        
                    </template>
                    <template v-slot:expand="{node}">
                        <span>{{ node.children.length }}</span>
                    </template>
                </vue3-tree-org>
            </div>
        </div>
    </div>
</div>
</template>

<style scoped>
.list{
    border-style:double;
}
.leaf{
    cursor:pointer;
    color:var(--el-color-primary);
}
</style>